<template>
  <view class="page-default">
    <c-nav-bar title="班级迎新统计" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="bg-green-rgba m-3 mb-4 mt-6 rounded-2 px-4 pb-8 line-height-6">
      <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />2025级旅游服务管理1班
      </view>

      <view class="flex border py-4">
        <view class="h-20 flex basis-1/2 items-center px-4">
          <ProcessChart color="green" />
        </view>
        <view class="h-20 basis-1/2 px-4">
          <view class="flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FFB412" /></view><view>应到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#21D155" /></view><view>实到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FC2D57" /></view><view>未到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
        </view>
      </view>
      <view class="relative">
        <u-image class="absolute left-8 -bottom-20" src="/static/images/green.png" height="86" width="20" mode="aspectFill" />
        <u-image class="absolute right-8 -bottom-20" src="/static/images/green.png" height="86" width="20" mode="aspectFill" />
      </view>
    </view>
    <view class="m-3 mt-4 rounded-2 bg-white bg-opacity-90 px-4 pb-8 pt-2 line-height-6">
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />信息采集完成人数：<text class="text-#02CAB1">
          369
        </text>
        人
      </view>
      <view>
        <PieChart />
        <view class="px-2 pb-4 pt-6">
          <u-line dashed />
        </view>
        <view class="m-3 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />特殊体质上报：<text class="text-#29B9E6">
            369
          </text>人
        </view>
        <ColumnChart />
        <view class="px-2 pb-4 pt-8">
          <u-line dashed />
        </view>
        <view class="m-3 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />特长上报：<text class="text-#E7B710">
            269
          </text>人
        </view>
        <view class="bg-yellow-trsans rounded-2 px-6">
          <view class="flex items-center gap-2 border bg-#fcf7e2 py-1 text-#E7B710">
            <view class="w-[60px] flex items-center justify-center">
              排名
            </view>
            <view class="flex flex-1 items-center justify-left">
              特长
            </view>
            <view class="w-[80px] flex items-center justify-right">
              上报人数
            </view>
          </view>
          <template v-for="item in specialList" :key="item.name">
            <view class="flex items-center gap-2 border py-1">
              <view class="w-[60px] flex items-center justify-center">
                <u-image src="/static/images/analysis/top1.png" height="30" width="30" class="" mode="aspectFill" />
              </view>
              <view class="flex flex-1 items-center justify-left">
                {{ item.name }}
              </view>
              <view class="w-[80px] flex items-center justify-right">
                {{ item.number }}人
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <!-- 学生列表 -->
    <view class="border-line mx-3 rounded-2 bg-white pb-4">
      <view class="flex items-center gap-2 border rounded-2 bg-#f5f8f9 px-4 py-2 text-#6E7B8B">
        <view class="w-[75px] flex items-center justify-left">
          姓名
        </view>
        <view class="flex flex-1 items-center justify-left">
          电话
        </view>
        <view class="w-[75px] flex items-center justify-right">
          班级报到
        </view>
        <view class="w-[75px] flex items-center justify-right">
          信息上报
        </view>
      </view>
      <template v-for="item in dataList" :key="item.name">
        <view class="border-line-dashed mx-4 flex items-center gap-2 py-2">
          <view class="w-[75px] flex items-center justify-left">
            {{ item.name }}
          </view>
          <view class="flex flex-1 items-center justify-left">
            {{ item.telphone }}
          </view>
          <view class="w-[75px] flex items-center justify-center">
            <up-icon name="checkmark-circle-fill" color="#00E0AE" size="20" />
          </view>
          <view class="w-[75px] flex items-center justify-center">
            <up-icon name="checkmark-circle-fill" color="#00E0AE" size="20" />
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import BarChart from './common/bar.vue';
import ColumnChart from './common/column.vue';
import PieChart from './common/pie.vue';
import ProcessChart from './common/process.vue';

const specialList = ref([
  { name: '舞蹈', rank: 1, number: 100 },
  { name: '舞蹈', rank: 2, number: 100 },
  { name: '舞蹈', rank: 3, number: 100 },
  { name: '舞蹈', rank: 4, number: 100 },
  { name: '舞蹈', rank: 5, number: 100 },
  { name: '舞蹈', rank: 6, number: 100 },

]);

const dataList = ref([
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },
  { name: '谢之遥', telphone: 15288888888, classStatus: true, infoStatus: false },

]);
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
:deep(.u-line-progress__text){
  color: #2D7AFC !important;
  font-size: 16px !important;
  font-weight: bold !important;
}
.bg-blue-trsans{
  background: linear-gradient(to bottom, #e9f7fb,transparent, transparent);
}
.bg-green-trsans{
  background: linear-gradient(to bottom, #e6f9f7,transparent, transparent);
}
.bg-yellow-trsans{
  background: linear-gradient(to bottom, #fdf6e6,transparent, transparent);
}
.border-line {
  border: 1px #ffffff solid;

}
.border-line-dashed{
  border-bottom: 1px #e0e7ec dashed;
}
</style>
